<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <el-col class="confr-title" :span="4">安排会议</el-col>
        </div>
      </el-col>
    </el-row>
    <el-row class="container add-form" v-loading="loading">
      <el-form
        :label-position="'right'"
        :rules="rules"
        label-width="100px"
        ref="addForm"
        :model="addForm"
        @submit.native.prevent
      >
        <el-form-item
          prop="roomName"
          :rules="[{ required: true, message: '请输入会议名称', trigger: 'blur' }]"
          label="会议名称"
        >
          <el-input v-model="addForm.roomName" maxlength="12" placeholder="请输入会议名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="会议人数">
          <el-input-number
            size="medium"
            :max="20"
            :min="1"
            v-model="addForm.total"
          ></el-input-number>
          <em>最大会议人数20</em>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('addForm')">提 &nbsp 交</el-button>
        </el-form-item>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
import qs from "qs";
import Router from "../../router/index";
import { Message } from "element-ui";

export default {
  name:'CreatConfrencing',
  inject: ["reloadHome", "getUsersFunc"],
  data() {
    return {
      loading: false,
      webrtcConfig: "",
      addForm: {
        roomName: "",
        total: 1,
      },
      rules: {
        roomName: [
          { required: true, message: "请输入会议名称", trigger: "blur" }
        ]
      },
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.addForm);
            this.$http.post('/webrtcConfig/creatRoom',{
              total:this.addForm.total,
              roomName:this.addForm.roomName
            }).then(res=>{
              console.log(res);
              let{status,data}=res;
              if(status==200&&data=="true"){
                this.$message({
                  message: res.msg,
                  type: "success"
                })
              }else{
                this.$message.error("可能是网络异常或视频服务器关闭")
              }
            },error=>{
              this.$message.error("可能是网络异常或视频服务器关闭")
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
  }
};
</script>
<style scoped lang="scss">
#videoConfrencingPage {
  display: flex;
  position: absolute;
  width: 100%;
  top: 90px;
  bottom: 0;
  background: #f5f5f5;
  /*overflow: hidden;*/
  .box-card {
    width: 100%;
    margin-top: 10px;
  }
  .grid-content {
    min-height: 40px;
    border-bottom: 1px solid #e5e5e5;
  }
  .container {
    padding: 0 10px 10px;
  }
  .confr-title {
    line-height: 40px;
    padding-left: 10px;
    font-size: 14px;
    color: #549DE8;
    font-weight: bold;
  }
  .add-form {
    margin-top: 36px;
    .el-input {
      width: 300px;
    }
  }
  .time {
    font-size: 13px;
    color: #999;
  }
  .image {
    width: 100%;
    display: block;
  }
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
    margin-right: 5px;
    margin-top: -2px;
  }
  .join {
    padding: 3px;
    margin-top: -4px;
  }
}
</style>
<style lang="scss">
</style>

